<template>
	<view>
		<image class="beijtu" src="../../static/zhuc.jpg" mode="aspectFill"></image>
		<view class="denglu">
			<image class="mflogo" src="../../static/tubiao.png" mode="aspectFill"></image>
			<view class="yonghum">
				<image class="yohimg" src="../../static/yonghu.png"></image>
				<input class="cinput" type="number" maxlength="11" v-model="phone" placeholder="手机号"/>
			</view>
<!-- 			<view class="yonghum">
				<image class="yohimg" src="../../static/yzm.png"></image>
				<input class="yanzm" type="text" maxlength="6" value="" placeholder="验证码"/>
				<view class="yanzman">获取验证码</view>
			</view> -->
			<view class="yonghum">
				<image class="yohimg" src="../../static/mima.png"></image>
				<input class="cinput" type="text" v-model="pas" password="true" placeholder="密码"/>
			</view>
			<view class="yonghum">
				<image class="yohimg" src="../../static/mimaqr.png"></image>
				<input class="cinput" type="text" v-model="qpas" password="true" placeholder="确认密码"/>
			</view>
			<view class="yonghum">
				<text class="yohimg_one">邀请码:</text>
				<input class="cinput" type="number" maxlength="18" v-model="mytuij" placeholder="手机号"/>
			</view>
			<view class="dengluan" @click="addzahngh">注册</view>
			<view class="zhudw">
				<view>已有账号，</view>
				<view class="zjdengl"  @click="getlodng">直接登录</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone:'',
				pas:'',
				qpas:'',
				role:0,
				mytuij:''//邀请码
			}
		},
		methods: {
			// 注册
			addzahngh(){
				var that = this; 
				if(that.phone==''){
					wx.showToast({
					    title: '填写手机号',
					    icon: 'none', 
					    duration: 2000     
					})  
					return
				};
				if(that.phone.length != 11){
					wx.showToast({
					    title: '填写正确手机号',
					    icon: 'none', 
					    duration: 2000     
					})  
					return
				};
				if(that.pas==''){
					wx.showToast({
					    title: '填写密码',
					    icon: 'none', 
					    duration: 2000     
					})  
					return
				};
				if(that.pas!=that.qpas){
					wx.showToast({
					    title: '请确认密码是否一致',
					    icon: 'none', 
					    duration: 2000     
					})  
					return
				};
				wx.showLoading({
					title:'注册中……'
				});
				wx.request({
					url: getApp().globalData.url+'/api/AddUser',
					method: 'POST',
					data:{
						phone:that.phone,
						pas:that.pas,
						role:that.role,
						mytuij:that.mytuij
					},
					header: {
						"Content-Type":"application/x-www-form-urlencoded"
					},                       
					success:function(res) {
						console.log(res)
						if(res.data.code==400){
							wx.hideLoading();
							wx.showToast({
								title: res.data.msg,
								icon: 'none', 
								duration: 2000
							})  
						}else{
							wx.hideLoading();
							wx.showToast({
								title: res.data.msg,
								icon: 'none', 
								duration: 2000
							});
							uni.setStorage({
								key: 'user_key',
								data: res.data.data,
								success: function () {
									if(res.data.data.role <1){
										uni.reLaunch({
											url:'../yuehexiao/yuehexiao'
										})
									}else{
										uni.reLaunch({
											url:'../yuangguanli/yuangguanli'
										})
									}
								}
							})          
						}
					}
				})
			},
			getlodng(){
				uni.reLaunch({
					url:'../lodng/lodng'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.beijtu{
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
	}
	.denglu{
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 99;
		background: rgba($color: #000000, $alpha: 0.6);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.mflogo{
			width: 200rpx;
			height: 200rpx;
			border-radius: 30rpx;
			margin-bottom: 70rpx;
			opacity:0.4;
		}
		.yonghum{
			width: 600rpx;
			height: 100rpx;
			margin-top: 20rpx;
			border-bottom: solid 1rpx #dbdbdb;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.yohimg{
				width: 50rpx;
				height: 50rpx;
			}
			.yohimg_one{
				width: 150rpx;
				height: 50rpx;
				color: #fff;
				
			}
			.cinput{
				width: 510rpx;
				color: #ffffff;
			}
			.yanzm{
				width: 280rpx;
				color: #ffffff;
			}
			.yanzman{
				width: 180rpx;
				height: 60rpx;
				font-size: 26rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #b3b3b3;
				border: solid 1rpx #7d7d7d;
				border-radius: 20rpx;
				background: rgba($color: #000000, $alpha: 0.5);
			}
		}
		.dengluan{
			width: 600rpx;
			height: 100rpx;
			background: rgba($color: #ff007f, $alpha: 0.8);
			border-radius: 15rpx;
			margin-top: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #ffffff;
			font-size: 35rpx;
		}
		.zhudw{
			width: 580rpx;
			margin-top: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #dbdbdb;
			.zjdengl{
				color: #ff4bab;
			}
		}
	}
</style>
